<template>
    <div class = 'movie-list'>
        <ul>
            <li v-for = '(item,index) in hotList' v-if = 'option && hotList'> 
                <router-link :to = '{path:"/mdetail",query:{id:item.id,cityname:citydata[1],cityid:citydata[0]}}'>
                    <div>
                        <div class = 'D-left'>
                            <img :src = 'item.img'>
                        </div>
                        <div class = 'D-middle'>
                            <div class = 'title'>
                                {{item.nm}}
                                <span>2D</span>
                             </div>
                             <div class = 'score'>
                                 <div v-if = 'item.sc != 0'>
                                    观众评分  <span>{{item.sc}}</span>
                                </div>
                                <div v-if = 'item.sc == 0'>
                                    暂无评分
                                </div>
                             </div>
                             <div class = 'actor'>
                                主演: <span>{{item.star}}</span>
                             </div>
                             <div>
                                {{item.showInfo}} 
                             </div>               
                        </div> 
                        <div class = 'D-right'>
                            <div>
                                购票
                            </div>    
                        </div>
                    </div>
                </router-link>
            </li>
            <li v-for = 'item in onlineList' v-if = '!option && onlineList'>
                <router-link :to = '{path:"/mdetail",query:{id:item.id}}'>
                    <div>
                        <div class = 'D-left'>
                            <img :src = 'item.img'>
                        </div>
                        <div class = 'D-middle'>
                            <div class = 'title'>
                                {{item.nm}}
                                <span>2D</span>
                             </div>
                             <div class = 'score'>
                                 <div v-if = 'item.sc != 0'>
                                    观众评分  <span>{{item.sc}}</span>
                                </div>
                             </div>
                             <div class = 'actor'>
                                主演: <span>{{item.star}}</span>
                             </div>
                             <div>
                                {{item.showInfo}} 
                             </div>               
                        </div> 
                        <div class = 'D-right'>
                            <div>
                                预购
                            </div>    
                        </div>
                    </div>
                </router-link>
            </li>   
            <div class = 'wait' v-if = 'wait'>
                <waiting></waiting>
            </div>
            <div class = 'nomore' v-if = '!wait'>我也是有底线的</div>
        </ul>
    </div>
</template>
<script>
import waiting from '@/components/waiting.vue';
export default {
    data(){
        return {
            hotList : [],
            onlineList : [],
            detailObj : [],
            wait : true,
        }
    },
    components:{
            waiting,
    },
    methods:{
        
    },
    created(){
                axios.get('https://apis.netstart.cn/maoyan/index/movieOnInfoList')
                .then(
                    data=> {     
                        this.hotList = data.data.movieList;
                        this.detailObj = [];
                        if(data.data.movieList){
                            data.data.movieList.forEach((element,index) => {
                            element.img = element.img.replace('w.h',480.960);
                            // console.log(element.id)
                            // this.durTime[index] = 0;
                            // this.movieDetail(element.id,index);
                            });
                        }
                        
                        this.wait = false;
                    }
                );
                axios.get('https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=10')
                .then(
                    data=> {     
                        this.onlineList =  data.data.coming;
                        // console.log(this.onlineList)
                        if(data.data.coming){
                            data.data.coming.forEach((element,index) => {
                            element.img = element.img.replace('w.h',480.960);
                            // console.log(element.id)
                            // this.durTime[index] = 0;
                            // this.movieDetail(element.id,index);
                        });
                        }
                        
                        this.wait = false;
                    }
                )
    },
    computed:{
        
    },
    props:{
        option:{
            type : Boolean,
        },
        citydata:{

        },
    }
}
</script>

<style lang = 'scss' scoped>
.movie-list{
    
    ul{
        li{
            background-color : white;
            margin:2px 0;
            padding : 10px;
            box-sizing : border-box;
            font-size : 15px;
            div{
                &::after{
                    content : '';
                    display : block;
                    clear : both;
                }   
                    .D-left{
                    float : left;
                    width : 70px;
                    height : 100%;
                    margin-right : 12px;
                    img{
                        width : 100%;
                        height : 100%;
                        border-radius : 6px;
                    }
                }
                .D-middle{
                    float : left;
                    width : 60%;
                    color : gray;
                    div{
                        margin : 4px 0 ;
                    }
                    .title{
                        margin-top : 0px;
                        color : black;
                        font-size : 18px;
                        span{
                            display : inline-block;
                            margin-left : 4px;
                            width : 25px;
                            height : 20px;
                            text-align : center;
                            border-radius : 5px;
                            font-size : 14px;
                            color : white;
                            background-color : #ccc;
                        }
                    }
                    .score{
                        height : 22px;
                        span{
                            color : #FF9900;
                            margin-left : 5px;
                        }
                    }
                    .actor{
                        margin-bottom : 5px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                            span{
                                color : #004358;
                                margin-left : 5px;
                            }
                    }
                }
                .D-right{
                    float : right;
                    height : 80px;
                    padding-top:35px;
                    box-sizing : border-box;
                    >div{
                        padding: 3px 10px;
                        color : #FF9900;
                        border:1px solid #FF9900;
                        border-radius : 5px;
                    }
                }
            }
            
            
        }
        .wait{
            height : 300px;
            text-align : center;
            line-height : 300px;
            color : grey;
        }
        .nomore{
            height : 50px;
            line-height : 50px;
            text-align : center;
            font-size : 18px;
            color : gray;
        }
    }
}
</style>